<script setup>
import { onMounted, reactive, watch } from 'vue'
import mapTool from '@/hook/useBaiduMap'
import { useNote } from "@/stores/note"

const Note = useNote()
const notes = Note.getNotesWithLocations()  // 含有坐标的note
let map = null
const clickPoint = ref([[0, 0]]) // 用户点击的位置
const clickMarker = mapTool.marker.get(1) // 用户点击位置的标识
const currentMarker = mapTool.marker.get(2) // 用户当前位置的标识

onMounted(() => {
  map = new BMap.Map("notePageMap", { enableMapClick: false }) // 禁用点击地标显示详细
  // 中心点，地图展示级别：先用IP定位一个大范围初始点
  new BMap.LocalCity().get(r => {
    map.centerAndZoom(new BMap.Point(r.center.lng, r.center.lat), 15)
  })
  map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
  mapTool.control(['GeolocationControl', 'OverviewMapControl'], map) // 加入控件

  // 开始精确定位！
  var geolocation = new BMap.Geolocation()
  geolocation.enableSDKLocation() // SDK辅助定位是否开启
  geolocation.getCurrentPosition(function (r) {
    if (this.getStatus() == BMAP_STATUS_SUCCESS) {
      currentMarker.setPosition(r.point)
      map.addOverlay(currentMarker)
      map.panTo(r.point)

      clickPoint.value[0] = [r.point.lng, r.point.lat]
      mapTool.geo.getLocationText(clickPoint.value[0], r => clickPoint.value[1] = r)
    }
  })

  // 插入记录的标识
  notes.forEach(note => {
    map.addOverlay(mapTool.marker.get(0, ...note.noteLocation[0]))
  })
  // 插入用户自定义的坐标
  Setting.noteSetting.diyLocations.forEach(p => {
    console.log(123)
    map.addOverlay(mapTool.marker.get(0, ...p[0]))
  })

  mapTool.event.add('click', point => {
    map.addOverlay(clickMarker)
    clickMarker.setPosition(point)
    map.panTo(point)
    clickPoint.value[0] = [point.lng, point.lat]
    mapTool.geo.getLocationText(clickPoint.value[0], r => clickPoint.value[1] = r)
  }, map)

})


// 只操作noteLocation[0] ，标识同步
// watch(clickPoint, () => {
//   let p = new BMap.Point(...clickPoint)
//   map.panTo(p)
//   marker.value.setPosition(p)
//   mapTool.geo.getLocationText(noteLocation[0], r => noteLocation[1] = r)
// })





const pointInput = ref("")  // 坐标备注输入框
const addPoint = () => {
  if (!pointInput.value) return myMsgE("请输入坐标备注")
  Setting.noteSetting.diyLocations.push(clickPoint.value)
  console.log(pointInput.value, clickPoint.value, Setting.noteSetting.diyLocations)
  Setting.setSetting(() => {
    console.log("添加成功")
  })
}
</script>

<template>
  <!-- 地图模块 -->
  <div class="map-div">
    <div id="notePageMap"></div>
    <div class="locationText"> {{ clickPoint[1] ?? '正在定位当前位置...' }} </div>
  </div>


  <!-- 表单 -->
  <div class="form" v-if="clickMarker.point.lng">
    <el-input v-model.trim="pointInput" placeholder="输入坐标备注来添加一个自定义坐标">
      <template #append>
        <el-button @click="addPoint">添加坐标</el-button>
      </template>
    </el-input>
  </div>
</template>

<style scoped lang="less">
.map-div {
  position: relative;
  border-radius: 5px;
  overflow: hidden;

  #notePageMap {
    width: 100%;
    height: 500px;
  }

  .locationText {
    color: black;
    /* 地图是白色的这里弄成黑色 */
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 19;
  }

  /* 去掉左下角的百度图标和底部的版权文字 */
  & ::v-deep(.BMap_cpyCtrl),
  & ::v-deep(.anchorBL:has(>a>img)) {
    display: none;
  }

}

.form {
  margin-top: 10px;
}
</style>